<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<body>
<div id="app">
    <form action="user!save" method="post" enctype="multipart/form-data">
        <p>账号*  <input type="text" placeholder="请输入登录账号" name="sysUsers.account"></p>
        <p>用户名*  <input type="text" placeholder="请输入用户名" name="sysUsers.userName"></p>
        <p>密码*  <input type="text" placeholder="请输入密码" name="sysUsers.password"></p>
        <p>确认密码*  <input type="text" placeholder="再次输入密码"></p>
        <p>用户类型*
            <select name="sysUsers.sysRoles.id">
                <option v-if="item.sysRoles!=null" v-for="(item,index) in users" v-text="item.sysRoles.roleName" :value="item.sysRoles.id"></option>
            </select>
        </p>
        <p>就诊科室*
            <select name="sysUsers.department.id">
                <option v-if="item.department!=null" v-for="(item,index) in users" :value="item.department.id">{{item.department.name}}</option>
            </select>
        </p>
        <p>头像  <input type="file" name="file"></p>
        <button>添加</button>
    </form>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            users:[],  //用户集合属性

        },
        methods:{
            goto(){
                $.getJSON({

                    type: "GET",  //提交类型必须与服务器要求的一致
                    url: "user!queryAll",   //远程服务器接口的地址请求后端
                    data: this.user,                           //传递的参数
                    success: function (json) {
                        console.log(JSON.stringify(json))
                        app.users=json;  //获得服务器里面的集合
                    }
                });
            },

        },mounted(){
            //从服务器拿数据
            this.goto();

        }
    });

</script>
</body>
</html>
